<template>
  <el-row :gutter="46">
    <el-col :span="4" class="drag-left">
      <el-button plain type="primary" class="primary_btn drag-left__btn" icon="el-icon-plus" @click="addLayout(1)">{{$t('configLazyLoad.businessConfig.singleRowLayout')}}</el-button>
      <br>
      <el-button plain type="primary" class="primary_btn drag-left__btn" icon="el-icon-plus" @click="addLayout(2)">{{$t('configLazyLoad.businessConfig.doubleRowLayout')}}</el-button>
      <br>
      <el-button plain type="primary" class="primary_btn drag-left__btn" icon="el-icon-plus" @click="addLayout(3)">{{$t('configLazyLoad.businessConfig.threeColumnLayout')}}</el-button>
    </el-col>
    <el-col :span="20" class="drag-right">
      <draggable :list="stepFields"
                 :options="{
                 group: {name: 'stepFields', put: ['layout']},
                 sort: true,
                 handle: '.layout-move'
                 }"
      >
        <el-row :gutter="15" v-for="(row, index) in stepFields" class="drag-right__layout">

          <el-col :span="24">
            <div class="fr">
              <el-button type="text" class="primary_btn drag-left__btn" icon="el-icon-plus" @click="addField(row)">{{$t('configLazyLoad.businessConfig.addFields')}}</el-button>
              <el-button type="text" class="primary_btn drag-left__btn layout-move" icon="fl iconfont icon-tuodongbuju">&nbsp;{{$t('configLazyLoad.businessConfig.dragTheLayout')}}</el-button>
              <el-button type="text" class="primary_btn drag-left__btn" icon="fl iconfont icon-shanchu" @click="deleteLayout(index)">&nbsp;{{$t('configLazyLoad.businessConfig.deleteLayout')}}</el-button>
            </div>
          </el-col>
          <div class="layout-content" :class="['layout-content__empty' + stepFieldsEmpty[index]]">
            <div
                    v-for="(one, index) in row.cols"
                    :style="{width: 100/row.cols.length + '%'}"
                    :key="index">
              <draggable
                :list="one.fields"
                :class="['drag-fields']"
                :options="{
                         group: {name: 'g1', put: ['g1', 'fields',], pull: true},
                         sort: true,
                         handle: '.field-move'
                       }"
              >
                <li v-for="(item, index) in one.fields" :key="index" class="field-item">
                  <i class="field-move iconfont icon-tuodongbuju"></i>
                  <el-select v-model="item._id"
                             filterable
                             class="field-item__select"
                             :placeholder="$t('public.pleasePick')"
                             size="small"
                             @change="fieldChange(item)">
                    <el-option v-for="(one, index) in allFields"
                               :key="index"
                               :label="one.name"
                               :value="one._id">
                    </el-option>
                  </el-select>
                  <i class="delete iconfont icon-shanchu" @click="deleteField(one.fields, index)"></i>
                </li>
              </draggable>
            </div>
          </div>
        </el-row>
      </draggable>
    </el-col>
  </el-row>
</template>

<script>
  import draggable from 'vuedraggable'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'bus-drag',
    props: {
      fieldsArr: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        stepFields: [
        ]
      }
    },
    inject: ['busType'],
    computed: {
      allFields () { // 启用的全部字段
        let allFields = this.$store.state.config.businessConfig[this.busType].allFields || []
        return allFields.filter((item) => item.enable === 'yes')
      },
      flowId () {
        let flow = this.$store.state.config.businessConfig[this.busType].flowInfo || {}
        return flow._id
      },
      // 布局为空时的placeholder展示
      stepFieldsEmpty () {
        let stepFields = this.stepFields
        return stepFields.map((item) => {
          let cols = item.cols || [{}]
          let hasField = cols.some((one) => {
            return (one.fields || []).length
          })
          if (!hasField) {
            return cols.length
          }
        })
      }
    },
    components: {
      draggable
    },
    methods: {
      // 添加列布局
      addLayout (type) {
        this.stepFields.push(this.cloneLayout(type))
      },
      // 删除列布局
      deleteLayout (index) {
        this.stepFields.splice(index, 1)
      },
      // 删除字段
      deleteField (arr, index) {
        arr.splice(index, 1)
      },
      // 添加字段
      addField (item) {
        let minIndex = 0
        let minNum = Infinity
        // 筛选出长度最小的字段列，进行添加
        item.cols.forEach((item, index) => {
          let currentLength = item.fields.length
          if (minNum > currentLength) {
            minNum = currentLength
            minIndex = index
          }
        })
        item.cols[minIndex].fields.push({_id: '', type: ''})
      },
      // 选择字段
      fieldChange (item) {
        // 设置字段类型
        this.allFields.some((one) => {
          if (item._id === one._id) {
            item.type = one.type
          }
        })
        // 字段为空，重置type
        if (!item._id) {
          item.type = ''
        }
      },
      // 生成列布局 n为列数
      cloneLayout: function (n) {
        let arr = []
        for (let i = 0; i < n; i++) {
          arr.push({fields: []})
        }
        return {
          cols: arr
        }
      },
      // 数据回显
      initData () {
        this.stepFields = deepClone(this.fieldsArr)
        // 过滤掉停用的字段
        this.stepFields.forEach((item) => {
          let cols = item.cols || []
          cols.forEach((one) => {
            one.fields = one.fields.filter((field) => {
              return this.allFields.some((obj) => obj._id === field._id)
            })
          })
        })
      },
      submit () {
        // 去除空数据
        this.stepFields.forEach((item) => {
          let cols = item.cols
          cols.forEach((one) => {
            one.fields = one.fields.filter((field) => field._id)
          })
        })
        return this.stepFields
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../../../../../assets/common.styl'
  .drag-left
    text-align center
    .drag-left__btn
      margin-bottom 10px
  .drag-right
    border-left 1px solid $c-border1
    min-height calc(100vh - 195px)
  .drag-right__layout
    border 1px dashed $c-border1
    border-radius 3px
    margin-bottom 10px
    .layout-content
      display inline-flex
      width 100%
      position: relative
    .layout-content__empty1
      &:before
        display block
        position absolute
        content '单列布局'
        z-index -1
        width 100%
        text-align center
        top: 15px
        font-size 14px
        color $cf-gray5
    .layout-content__empty2
      &:before
        display block
        position absolute
        content '双列布局'
        z-index -1
        width 100%
        text-align center
        top: 15px
        font-size 14px
        color $cf-gray5
    .layout-content__empty3
      &:before
        display block
        position absolute
        content '三列布局'
        z-index -1
        width 100%
        text-align center
        top: 15px
        font-size 14px
        color $cf-gray5
  .field-item
    padding 10px
    box-sizing border-box
    border 1px solid $c-border1
    border-radius 3px
    margin-bottom 20px
    .field-item__select
      width calc(100% - 52px)
      margin 0 10px
    .field-move
      color $cf-gray7
      &:hover
        cursor pointer
    .delete
      color $cf-gray7
      &:hover
        cursor pointer
        color $c-main
  .drag-fields
    height 100%
    min-height 50px
    padding 0 15px
    box-sizing border-box
  .drag-fields__border
    border 1px dashed $c-border1
</style>
<style scoped lang="stylus">
  .sortable-chosen
    background-color #eee
</style>


